import BBCode from "@bbob/react/es/Component";
import reactPreset from "@bbob/preset-react/es";
import { useState } from "react";
import { Input, Button } from "antd";

const { TextArea } = Input;

const Bbcode = () => {
  const [bbcodeContent, setBbcodeContent] = useState("");

  const handleInputChange = (e) => {
    const inputData = e.target.value;
    setBbcodeContent(inputData);
  };

  return (
    <div>
      <h2>BbCode редактор</h2>
      <Button type="text" href="https://www.bbcode.org/reference.php" block>
        Ссылка на синтаксис
      </Button>
      <TextArea
        rows={20}
        placeholder="Начните вводить свой текст, для редактирования используйте BbCode"
        value={bbcodeContent}
        onChange={handleInputChange}
      />

      <div className="text">
        <BBCode plugins={[reactPreset()]}>{bbcodeContent}</BBCode>
      </div>
    </div>
  );
};

export default Bbcode;
